<template>
  <detailbox :title="progressType == '2' ? '评审' : '审核'" @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div></div>
      <div class="">
        <el-button type="primary" size="small" @click="submit()">提交</el-button>
        <el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col :span="12">
        <el-form inline="true" size="small" ref="form" :model="form">
          <el-row v-for="(item, index) in form.detailList" :key="index">
            <basic-container>
              <div class="main_title success_f flex_between">
                <b>
                  管理信息
                  <span v-if="form.detailList.length > 1">({{ index + 1 }})</span>
                </b>
                <div>
                  <el-form-item
                    label="审核结论："
                    style="margin-bottom: 0;"
                    size="small"
                    :prop="`detailList.${index}.check`"
                    :rules="{ required: true, message: '请选择审核结论', trigger: 'blur' }"
                  >
                    <el-select v-model="item.check" placeholder="请选择" style="width: 160px;" :class="{ red_f: item.check == '2' }">
                      <el-option label="通过" value="1"></el-option>
                      <el-option label="不通过" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="不通过理由："
                    v-if="item.check == '2'"
                    style="margin-bottom: 0;"
                    size="small"
                    :prop="`detailList.${index}.content`"
                    :rules="{ required: true, message: '请输入不通过理由', trigger: 'blur' }"
                  >
                    <el-input placeholder="请输入" v-model="item.content"></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="mb20">
                <span class="index_num success_bg">1</span>
                <b class="f14">基础信息</b>
              </div>
              <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
                <tr>
                  <td width="150">采购计划管理编号</td>
                  <td>{{ item.number }}</td>
               		 <td width="150">采购类别</td>
                  <td>{{ purchaseList[item.purchaseType] }}</td>
                </tr>
                <tr>
                  <td>生产计划管理编号</td>
                  <td>{{ item.productionPlanNumber || '-' }}</td>
                  <td>管理部门</td>
                  <td>{{ item.manageDeptName }}</td>
                </tr>
              	 <tr>
               		 <td>负责人</td>
             		   <td>{{ item.manageUserName }}</td>
                  <td>编制部门</td>
                  <td>{{ item.createDeptName }}</td>
                </tr>
              </table>
              <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="item.deviceList && item.deviceList.length != 0">
                <tr>
                  <td>设备名称</td>
               		 <td class="gray_bg">设备型号</td>
                  <td>采购数量</td>
            	   </tr>
                <tr v-for="(v, i) in item.deviceList" :key="i">
                  <td class="white_bg">{{ v.deviceName }}</td>
                  <td class="white_bg">{{ v.deviceModel }}</td>
                  <td class="white_bg">{{ v.qty }}</td>
                </tr>
              </table>

              <table class="table1 owntable mb20" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="item.outsourcingList && item.outsourcingList.length != 0">
                <tr v-for="(v, i) in item.outsourcingList" :key="i">
                  <td width="150">外包服务</td>
               		 <td>{{ v.outsourcingName }}</td>
                </tr>
              </table>

              <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="item.softwareList && item.softwareList.length != 0">
                <tr>
               		 <td>计算机应用软件名称</td>
                  <td class="gray_bg">计算机应用软件版本</td>
            	     <td>数量</td>
                </tr>
                <tr v-for="(v, i) in item.softwareList" :key="i">
                  <td class="white_bg">{{ v.softwareName }}</td>
                		<td class="white_bg">{{ v.softwareVersion }}</td>
                  <td class="white_bg">{{ v.qty }}</td>
                </tr>
              </table>

              <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="item.productList && item.productList.length != 0">
                <tr>
                  <td>产品名称</td>
                  <td class="gray_bg">产品编号</td>
                  <td>规格型号</td>
                </tr>
                <tr v-for="(v, i) in item.productList" :key="i">
                  <td class="white_bg">{{ v.productName }}</td>
                  <td class="white_bg">{{ v.productCode }}</td>
                  <td class="white_bg">{{ v.productSku }}</td>
                </tr>
              </table>

              <check-file :detail="item"></check-file>
            </basic-container>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="8">
        <check-process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :shenheNum="shenheNum" :progressType="progressType"></check-process-record>
      </el-col>
    </el-row>

    <steps ref="steps" @close="success()" :checkItem="form"></steps>
    <showhistory ref="showhistory" :processStatus="processStatus" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
  </detailbox>
</template>

<script>
import { getdealDetail, deal } from '@/api/myapi/tixiwenjian';
export default {
  props: {
    progressType: '',
    groupNumber: ''
  },
  data() {
    return {
      processStatus: '',
      radio: '',
      nowdate: '',
      checked: false,
      showpreview: false,
      tableData: [],
      useTemp: false,
      shenheNum: 0,
      options: [],
      system: 'purchaseplanprocess',
      guifanFilesProcessRecordList: [],
      form: {
        detailList: []
      }
    };
  },
  mounted() {
    this.getdealDetail();
  },
  methods: {
    getdealDetail() {
      getdealDetail(
        {
          groupNumber: this.groupNumber
        },
        this.system
      ).then(({ data }) => {
        console.log(data);
        if (data.success) {
          this.form.detailList = [...data.data];
          this.processStatus = data.data[0].processStatus;
          this.form.detailList.forEach(item => {
            this.$set(item, 'check', '');
            this.$set(item, 'content', '');
          });
          this.guifanFilesProcessRecordList = data.data[0].processRecordList;
          this.shenheNum = data.data[0].processRecordList.length;
        }
      });
    },
    close() {
      this.$emit('close');
    },
    success() {
      this.$emit('close');
      this.$emit('success');
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let data = [];
          for (let i = 0; i < this.form.detailList.length; i++) {
            let item = this.form.detailList[i];
            data.push({
              id: item.id,
              checkStatus: item.check || '0',
              type: this.progressType,
              content: item.content
            });
          }
          deal({ processList: JSON.stringify(data) }, this.system).then(({ data }) => {
            if (data.success) {
              // this.$message.success('提交成功')
              this.nowdate = this.dateFormat(new Date());
              this.openDialg('steps');
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.active {
  background-color: #e6f1fc !important;
  color: #126bc9 !important;
}

.red_f div::deep .el-input__inner {
  color: #ff0000;
}
</style>
